<!--
 * @Author: sunli
 * @Date: 2021-12-27 23:02:43
 * @LastEditTime: 2022-12-17 14:44:18
 * @LastEditors: sunli
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /etrip-ui/src/pages/navBar/demo.vue
-->
<script setup>
import NavBar from '../../../packages/navBar/index.vue'
import {ref} from 'vue'

const visible_1 = ref(false)
const visible_2 = ref(false)
const visible_3 = ref(false)

const defaults = () => {
  visible_1.value = true
}
const more = () => {
  visible_2.value = true
}
const range = () => {
  visible_3.value = true
}
const change = (value) => {
  console.log(value)
}
const leftClick = () => {
  console.log('leftClick')
}
const rightClick = () => {
  console.log('rightClick')
}
</script>

<template>
  <div>
    <nav-bar :zIndex="11" fixed title="fixed navbar"></nav-bar>
    <br>
    <br>
    <br>
    <nav-bar title="火车票查询"></nav-bar>
    <br>
    <nav-bar left-arrow title="火车票查询"></nav-bar>
    <br>
    <nav-bar left-arrow title="火车票查询">
      <template #right>
        <div>
            按钮
        </div>
      </template>
    </nav-bar>
    <br>
    <nav-bar left-arrow title="火车票查询" @left-click="leftClick" @right-click="rightClick">
      <template #right>
        <div>
            按钮
        </div>
      </template>
    </nav-bar>
  </div>
</template>

<style>
.a {
  padding: 0 15px;
}
</style>
